<template>
	<view class="container">
		<view class="guess-section">
			<view 
				v-for="(item, index) in goodsList" :key="index"
				class="guess-item"
				@click="navToDetailPage(item)"
			>
			<!-- 背景色区域 -->
			<!-- <view class="carousel-section">
				<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view> -->
				<view class="image-wrapper">
					<image :src="item.image" mode="aspectFill"></image>
				</view>
			<!-- </view> -->
				<view class="">
					<text class="un-icon1 un-left iconfont icon-xinheart118 "></text>
					<!-- <faicon type="heart" color="#909399" size="" class="un-icon1 un-left" style="display: inline;"></faicon> -->
					<!-- <text class="yticon icon-xingxing un-icon un-left"></text> -->
					<text class=" tit2 ">1000+</text>
					<text class="yticon icon-dianzan-ash un-icon un-left" ></text>
					<text class="tit2  ">好评率</text>
					<text class="tit2  ">98</text>
					<text class="tit2  ">%</text>
					<text class="yticon icon-you un-icon un-right"></text>
					<text class=" tit2 un-right">件商品</text>
					<text class=" un-right un-tit">100</text>
					<text class=" tit2 un-right">共</text>
					
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				/* titleNViewBackground:"#EEEEEE", */
				goodsList: [],
			};
		},
		
		onLoad() {
			this.loadData();
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		
		methods: {
			 /**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
				async loadData() {
					let goodsList = await this.$api.json('goodsList');
					this.goodsList = goodsList || [];
				},
				//品牌详情页
				navToDetailPage(item) {
					//测试数据没有写id，用title代替
					let id = item.title;
					uni.navigateTo({
						url: `/pages/product/product?id=${id}`
					})
				},
		},
	}
</script>

<style lang="scss">
	
	/* .carousel-section {
		position: relative;
		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 260upx;
			transition: .4s;
		}
	} */
	
	.guess-section{
		display:flex;
		flex-wrap:wrap;
		padding: 0 30upx;
		background: #fff;
		.guess-item{
			
			display:flex;
			flex-direction: column;
			width: 100%;
			padding-bottom: 70upx;
			&:nth-child(2n+1){
				margin-right: 4%;
			}
		}
		.image-wrapper{
			
			width: 100%;
			height: 340upx;
			border-radius: 3px;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
		.un-icon{
			font-size: $font-lg;
			color: $font-color-light;
			line-height: 90upx;
		}
		.un-icon1{
			font-size: 24upx;
			color: $font-color-light;
			line-height: 90upx;
		}
		.un-right{
			float: right;
		}
		.un-left{
			margin-left: 30upx;
		}
		.un-tit{
			font-size: $font-sm;
			color: #E02E24;
			line-height: 90upx;
		}
		.tit2{
			font-size: $font-sm;
			color: $font-color-light;
			line-height: 90upx;
		}
	}
</style>
